<!DOCTYPE html>
<!--[if lt IE 7]>  <html class="ie ie6 lte9 lte8 lte7 no-js"> <![endif]-->
<!--[if IE 7]>     <html class="ie ie7 lte9 lte8 lte7 no-js"> <![endif]-->
<!--[if IE 8]>     <html class="ie ie8 lte9 lte8 no-js">      <![endif]-->
<!--[if IE 9]>     <html class="ie ie9 lte9 no-js">           <![endif]-->
<!--[if gt IE 9]>  <html class="no-js">                       <![endif]-->
<!--[if !IE]><!--> <html class="no-js">                       <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>ELITE - A Powerfull Responsive Admin Theme</title>
    
	<!-- 
    ***************************************
    DEMO - DEMO - DEMO - DEMO - DEMO - DEMO
    
    This demo is modifyed to perfom 
    better(as our servers anr't that fast)
    Most cusom files are compressed and 
    are not readable.
    ***************************************
    -->
    
	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.html">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/mobile/apple-touch-icon-114x114.png" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/mobile/apple-touch-icon-72x72.png" />
    <link rel="apple-touch-icon-precomposed" href="images/mobile/apple-touch-icon.png" />
    <link rel="shortcut icon" href="images/apple-touch-icon.html" />
    <link rel="apple-touch-startup-image" media="(max-device-width: 480px) and not (-webkit-min-device-pixel-ratio: 2)" href="images/mobile/splash-320x460.png" />
    <link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="images/mobile/splash-640x920-retina.png" />
    <link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: portrait)" href="images/mobile/splash-768x1004.png" />
    <link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: landscape)" href="images/mobile/splash-1024x748.png" />
    <link rel="apple-touch-startup-image" media="(min-device-width: 1536px) and (orientation: portrait)" href="images/mobile/splash-1536x2008-retina.png" />
    <link rel="apple-touch-startup-image" media="(min-device-width: 2048px) and (orientation: landscape)" href="images/mobile/splash-2048x1496-retina.png" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="HandheldFriendly" content="true"/>   
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
    <script src="js/mobiledevices.js"></script>

    <meta name="application-name" content="Elite Admin Skin">
    <meta name="msapplication-tooltip" content="Cross-platform admin skin.">
    <meta name="msapplication-starturl" content="http://themes.creativemilk.net/elite/html/index.html">
    <meta name="msapplication-task" content="name=Home;action-uri=http://themes.creativemilk.net/elite/html/index.html;icon-uri=http://themes.creativemilk.net/elite/html/images/favicons/favicon.ico">
    <meta http-equiv="cleartype" content="on" /> 
    
    <!--[if lt IE 8]>
	<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="css/framework.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/ui/jquery.ui.base.css"/>
    <link rel="stylesheet" href="css/theme/darkblue.css" id="themesheet"/>
	<!--[if IE 7]>
	<link rel="stylesheet" href="css/destroy-ie6-ie7.css"/>
    <![endif]-->
    
    <link rel="shortcut icon" href="images/favicons/favicon.ico" />

    <script src="../../ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>!window.jQuery && document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
    <script src="../../code.jquery.com/ui/1.8.22/jquery-ui.min.js"></script>
    <script>!window.jQueryUI && document.write('<script src="js/jquery-ui-1.8.22.min.js"><\/script>')</script>
    <script src="js/jquery.ui.touch-punch.min.js"></script>
    <script src="js/jquery.mousewheel.min.js"></script>
	<script src="js/jquery.ui.spinner.js"></script>            
    <script src="js/tipsy.js"></script>                       
    <script src="js/treeview.js"></script>                      
    <script src="js/fullcalendar.min.js"></script>               
    <script src="js/selectToUISlider.jQuery.js"></script>       
    <script src="js/jquery.contextMenu.js"></script>            
    <script src="js/elfinder.min.js"></script>                  
    <script src="js/autogrow-textarea.js"></script>              
    <script src="js/textarearesizer.min.js"></script>
    <script src="wysiwyghtml5/parser_rules/advanced.js"></script>
	<script src="wysiwyghtml5/dist/wysihtml5-0.3.0.js"></script>                    
    <script src="js/jquery.colorbox-min.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src="js/jquery.maskedinput-1.3.min.js"></script> 
    <script src="js/json2.js"></script>
    <script src="audiojs/audiojs/audio.min.js"></script> 
    <script src="js/e_styleswitcher.1.0.min.js"></script>                 
    <script src="js/main.js"></script>  
    <script src="js/modernizr.min.js"></script>
                
</head>
<body class="layout_fluid layout_responsive"> 

    <!-- this part can be removed, its just here 
         to let you switch between styles and layout sizes -->
    <div id="e-styleswitcher">
        <div class="e-styleswitcher-inner">
            <div class="e-styleswitcher-arrow"><img src="images/icons/plix-16/white/arrow-right-16.png" alt="" /></div>
            <div class="box">
            	<h4>Styles</h4>
                <select id="choose-styling">
                	<option value="strangeblue">Strange blue</option>
                    <option value="black">Black</option>
                    <option value="darkblue">Dark blue</option>
                    <option value="lightgrey">Light grey</option>
                </select>
            </div>
            <div class="box">
            	<h4>Layout sizes</h4>                
                <select id="set-layout-size">
                	<option value="layout_fluid">fluid</option>
                    <option value="layout_768">768</option>
                    <option value="layout_960">960</option>
                    <option value="layout_1024">1024</option>
                    <option value="layout_1200">1200</option>
                    <option value="layout_1600">1600</option>
                </select>
            </div> 
            <div class="box">
            	<h4>Responsive</h4>                
                <select id="set-layout-responsive">
                	<option value="layout_responsive">yes</option>
                    <option value="">no</option>
                </select>
            </div>
            <div class="box">
            	<h4>Get theme</h4>                
                <select id="get-theme">
                	<option value="">no</option>
                    <option value="yes">yes</option>
                </select>
            </div>                         
        </div>
    </div>
  
	<div id="container">
    
        <!-- MAIN HEADER -->
                
        <header id="header">
        	<div id="header-border">
                <div id="header-inner">
                
                    <div class="left">
                        <a href="index.html" id="logo">ELITE</a>
                    </div><!-- End .left -->
                    
                    <div class="right">
                        <!-- eMenu -->
                        <nav>
                            <ul class="e-splitmenu" id="header-menu">
                                <li><span>Menu</span><a href="javascript:void(0);"><span class="arrow-down-10 plix-10"></span></a>
                                
                                     <div>
                                        <ul>
                                            <li><a href="index.html"><span class="stats2-10 plix-10"></span> Stats</a></li>
                                            <li><a href="index.html"><span class="lock-10 plix-10"></span> Security</a></li>
                                            <li><a href="index.html"><span class="download-10 plix-10"></span> Downloads</a></li>
                                        </ul>                                      
                                    </div>                               

                                </li>
                                <li><span>Settings</span><a href="javascript:void(0);"><span class="arrow-down-10 plix-10"></span></a>
                                
                                     <div>
                                        <ul>
                                            <li><a href="index.html"><span class="home-10 plix-10"></span> Basic Settings</a></li>
                                            <li><a href="index.html"><span class="settings-10 plix-10"></span> Site Settings</a></li>
                                            <li><a href="index.html"><span class="comment-10 plix-10"></span> User Settings</a></li>
                                            <li><a href="index.html"><span class="bookmark-10 plix-10"></span> Server Settings</a></li>
                                        </ul>                                      
                                    </div>
                                    
                                </li>
                        		<li class="e-menu-profile">
                                    <a href="javascript:void(0);"><span class="arrow-down-10 plix-10"></span></a> 
                                    <img src="images/avatar.jpg" alt=""/>
                                    
                                    <div>
                                        <ul>
                                            <li><a href="index.html"><span class="mail-10 plix-10"></span> Inbox</a></li>
                                            <li><a href="index.html"><span class="upload-10 plix-10"></span> Settings</a></li>
                                            <li><a href="index.html"><span class="info-10 plix-10"></span> Logout</a></li>
                                        </ul>                                      
                                    </div> 
                                            
                                </li>
                            </ul>
                        </nav>
                    </div><!-- End .right --> 
                    
                </div><!-- End #header-border --> 
            </div><!-- End #header-inner -->  
                
		</header><!-- End #header -->
        
        <!-- CONTENT -->
                 
        <div id="content">
            <div id="content-border">
            
                <!-- CONTENT HEADER -->
                
                <header id="content-header">
                    <div class="left">
                    	<a href="javascript:void(0);" id="toggle-mainmenu" class="button-icon tip-s" title="Toggle Main Menu"><span class="arrow-up-10 plix-10"></span></a>
                        
                        <!-- main search form -->
                        <form method="post" id="mainsearch">
                            <input type="text" placeholder="Live search..." name="" autocomplete="off"/>
                            <input type="submit" value="" />
                        </form>
                    </div><!-- End .left --> 
                    <div class="right">
                    	<!-- sidebar switch -->
                    	<a href="javascript:void(0);" id="toggle-sidebar" class="button-icon tip-s" title="Switch Main Menu"><span class="arrow-left-10 plix-10"></span></a>
                        
                        <!-- breadcrumbs -->
                        <nav id="main-breadcrumbs">
                            <ul>
                                <li class="bc-tab-first">
                                    <a href="index.html">Home</a>
                                </li>
                                <li>
                                    <a href="index.html">Interface Elements</a>
                                </li>
                                <li class="bc-tab-last">Dialogs</li>
                            </ul>          
                        </nav>
                        
                        <!-- demo dialog button -->
                        <a href="javascript:void(0);" id="open-main-dialog" class="button-text-icon tip-w" title="Some tooltip pointing right"><span class="fullscreen-10 plix-10"></span> Dialog</a>
                        
                        <!-- the main page dialog -->
                        <div id="main-page-dialog" title="Welcome to Elite" style="display:none">
                        <img src="images/jquery-ui-logo.png" alt="" class="dummy-img-dialog"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet est et mauris ornare lobortis dignissim quis massa. Donec ullamcorper turpis ac lectus semper commodo. Mauris tincidunt, erat et tempor interdum, dolor metus consectetur dui, eu accumsan augue augue a erat. Fusce justo nibh, tristique vitae pretium ut, venenatis nec felis. Curabitur congue tempor ultricies. Proin quis libero dignissim neque posuere pharetra vel adipiscing massa. Sed sit amet erat ac arcu sodales aliquam. Nam tellus sapien, ornare in tincidunt vel, ultricies id quam.
						</div>
                        
                        <span class="preloader"></span>
                        
                        <!-- widgets controls -->
                        <div id="widgets-controls">
                            <span class="preloader"></span>                       
                            <div class="icon-group"> 
                                <a href="javascript:void(0);" class="changeto-grid selected tip-s" title="Show grid"><span class="grid-10 plix-10"></span></a>
                                <span></span>
                                <a href="javascript:void(0);" class="changeto-rows tip-s" title="Show rows"><span class="rows-10 plix-10"></span></a>
                            </div>
                            
                            <!-- widgets management switch -->
                            <a href="javascript:void(0);" class="button-icon tip-s" title="Manage widgets" id="powerwidget-panel-switch"><span class="settings-10 plix-10"></span></a>
                        </div>
                    </div><!-- End .right -->                
                
				</header><!-- End #content-header --> 
                                
                <div id="content-inner">
                    
                    <!-- SIDEBAR -->
                    
                    <aside>
                    
                    	<!-- SIDEBAR PROFILE -->
                        
                    	<div id="sidebar-profile">
                            <div id="main-avatar">
                            	<span class="indicator">38</span>
                                <img src="images/avatar.jpg" alt=""/>
                            </div>
                            <div id="profile-info">
                                <div>
                                    <a href="javascript:void(0);"><b>Administrator</b></a>
                                    <a href="javascript:void(0);">Profile settings</a>
                                    <a href="javascript:void(0);">Server settings</a>
                                    <a href="javascript:void(0);">Logout</a>
                                </div>
                            </div>
                        </div>
                        
                        <!-- MAIN MENU -->
                        
                        <nav id="main-menu">
                            <ul>
                                <li><a href="index.html"><span class="home-16 plix-16"></span> Dashboard</a></li>
                                <li class="no-mobile"><a href="documentation.html"><span class="note-16 plix-16"></span> Documentation</a>
                                
                                    <ul>
                                    	<li><a href="doc-accordion.html">Accordion</a></li> 
                                    	<li><a href="doc-breadcrumbs.html">Breadcrumbs</a></li>
                                        <li><a href="doc-buttons.html">Buttons</a></li>
                                        <li><a href="doc-calendar.html">Calendar</a></li>
                                        <li><a href="doc-charts.html">Charts</a></li>
                                        <li><a href="doc-dialogs.html">Dialogs</a></li>
                                        <li><a href="doc-editors.html">Editors</a></li>
                                        <li><a href="doc-extra.html">Extra</a></li>
                                        <li><a href="doc-fileexplore.html">File Explore</a></li>
                                        <li><a href="doc-forms.html">Forms</a></li>
                                        <li><a href="doc-grid.html">Grid</a></li>
                                        <li><a href="doc-icons.html">Icons</a></li>
                                        <li><a href="doc-listsblocks.html">Lists &amp; Blocks</a></li>
                                        <li><a href="doc-media.html">Media</a></li>
                                        <li><a href="doc-menus.html">Menus</a></li>
                                        <li><a href="doc-misc.html">Misc</a></li>
                                        <li><a href="doc-search.html">Search</a></li>
                                        <li><a href="doc-tables.html">Tables</a></li>
                                        <li><a href="doc-tabs.html">Tabs</a></li>
                                        <li><a href="doc-toolbars.html">Toolbars</a></li> 
                                        <li><a href="doc-widgets.html">Widgets</a></li>                                         
                                    </ul> 
                                                                   
                                </li>
                                <li><a href="calendar.html"><span class="calendar-16 plix-16"></span>Calendar<span class="color-indicator">28</span></a></li>
                                <li><a href="javascript:void(0);"><span class="postcard-16 plix-16"></span> Form Elements <span class="button-icon"><span class="plus-10 plix-10"></span></span></a>

                                    <ul>
                                    	<li><a href="editors.html">Editors</a></li>
                                    	<li><a href="forms.html">Forms</a></li>
                                        <li><a href="login.html">Login form 1</a></li>
                                        <li><a href="login-2.html">Login form 2</a></li>
                                        <li><a href="login-3.html">Login form 3</a></li>
                                        <li><a href="login-4.html">Login form 4</a></li>
                                        <li><a href="search.html">Search</a></li>
                                        <li><a href="wizard.html">Wizard</a></li>                                         
                                    </ul>
                                
                                </li>
                                <li><a href="media.html"><span class="image-16 plix-16"></span> Media</a></li>
                                <li><a href="planning.html"><span class="pencil-16 plix-16"></span> Planning</a></li>
                                <li><a href="maps.html"><span class="map-16 plix-16"></span> Google Maps <span class="indicator tip-w" title="Some tip goes here">tooltip</span></a></li>
                                <li><a href="fileexplore.html"><span class="folder-16 plix-16"></span> File Explore</a></li> 
                                <li><a href="javascript:void(0);"><span class="warning-16 plix-16"></span> Error pages<span class="button-icon"><span class="plus-10 plix-10"></span></span></a>

                                    <ul>
                                    	<li><a href="400.html">400</a></li>
                                    	<li><a href="401.html">401</a></li>
                                        <li><a href="403.html">403</a></li>
                                        <li><a href="404.html">404</a></li>
                                        <li><a href="500.html">500</a></li>
                                        <li><a href="503.html">503</a></li>                                         
                                    </ul>
                                
                                </li>                                                               
                                <li><a href="widgets.html"><span class="rows4-16 plix-16"></span> Widgets</a></li>
                                <li><a href="tables.html"><span class="cells-16 plix-16"></span> Tables</a></li>
                                <li><a href="charts.html"><span class="stats2-16 plix-16"></span> Charts </a></li>
                                <li class="menu-open page-active"><a href="javascript:void(0);"><span class="controls-16 plix-16"></span> Interface Elements <span class="button-icon"><span class="min-10 plix-10"></span></span></a>
                                
                                    <ul>
                                    	<li><a href="accordion.html">Accordion</a></li>                                        
                                        <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
                                        <li><a href="buttons.html">Buttons</a></li>
                                        <li class="page-active"><a href="dialogs.html">Dialogs</a></li>
                                        <li><a href="icons.html">Icons</a></li>
                                        <li><a href="listsblocks.html">Lists &amp; Blocks</a></li>
                                        <li><a href="menus.html">Menus</a></li>
                                        <li><a href="misc.html">Misc</a></li>
                                        <li><a href="tabs.html">Tabs</a></li>
                                        <li><a href="toolbars.html">Toolbars</a></li>
                                    </ul>           
                                                           
                                </li>
                                <li><a href="grid.html"><span class="layout3-16 plix-16"></span> Grid <span class="indicator">960</span></a></li>
                            </ul>
                        </nav>                      
                    </aside>
                    
                    <!-- sidebar meta stats -->
                    <div id="sidebar-meta">
                    	<div id="sidebar-meta-inner">
                        	<div>
                                <p class="left">Space</p> 
                                <p class="right">4,551 MB / 10 GB</p>
                            </div>
                            <div class="pbar">
                               <span style="width:50%"></span>                            
                            </div>
                        	<div>
                                <p class="left">Traffic</p> 
                                <p class="right">8,001 MB / 10 GB</p>
                            </div>
                            <div class="pbar">
                               <span style="width:81%"></span>                            
                            </div>
                        </div>  
                    </div> 
                     
                    <!-- CONTENT -->
                    
					<div id="content-main">
                        <div id="content-main-inner">
                          
                            <!-- widgets management panel --> 
                            <div id="powerwidgetspanel" class="powerwidgetspanel">
                                <header>
                                    <h2>Power widgets panel</h2>
                                </header>
                                <div class="powerwidgetspanel-widget" data-widget-id="widget1">
                                    <input type="checkbox"/>
                                    <label>UI dialogs</label>
                                </div>
                                <div class="powerwidgetspanel-widget" data-widget-id="widget2">
                                	<input type="checkbox"/>
                                    <label>eNotify</label>                         
                                </div>
                               <div class="powerwidgetspanel-widget" data-widget-id="widget3">
                                    <input type="checkbox"/>
                                    <label>Dialogs</label>
                                </div>
                                <div class="powerwidgetspanel-widget" data-widget-id="widget4">
                                    <input type="checkbox"/>
                                    <label>Big dialogs</label>
                                </div>                             
                                <div class="powerwidgetspanel-widget" data-widget-id="widget5">
                                    <input type="checkbox"/>
                                    <label>Custom dialogs</label>                           
                                </div>                     
                            </div>
                            
                            <div class="page-header">
                                <h2>Dialogs</h2>
                                <span class="page-helper">1.0</span>
                                <a href="doc-dialogs.html" class="page-helper">Documentation</a>
                                 <a href="javascript:void(0);" class="page-helper empty-local-storage">Clear storage</a>
                                <p>Basic and easy to use dialogs, growls and notifications.</p>
                            </div> 
                                                    
                            <!-- Start grid -->
                                                        
                            <section class="g_1">
                            
                                <div class="dialog warning">
                                    <p><img src="images/icons/dialogs/warning-16.png" alt=""/> Dialog outside the widget</p>
                                    <span>x</span>
                                </div> 
                                
                                <div class="dialog-big info">
                                    <h3>Dialog outside the widget</h3>
                                    <span>x</span>
                                    <div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam justo sit amet odio aliquam semper. Phasellus eget lobortis nisi. Vivamus in nulla ut justo convallis tincidunt. Etiam rutrum suscipit dolor, vitae facilisis eros tincidunt gravida. Fusce vulputate lorem sed lacus pellentesque egestas adipiscing ipsum fringilla. Proin scelerisque elementum dui, eu scelerisque dolor rhoncus non. Sed justo velit, sollicitudin ac adipiscing sit amet, iaculis a tortor. 
                                    </div>                                                
                                </div>                                      
                                
                                <!-- New widget -->
                                
                                <div class="powerwidget" id="widget1">
                                    <header>
                                    	<h2>UI dialogs</h2>                                  
                                    </header>
                                    <div>
                                    	<div class="inner-spacer">                                             
                                            <label class="g_1_4">Click to open:</label> 
                                            <div class="g_3_4_last">                                     
                                                <a href="javascript:void(0);" class="button-text" id="open-dialog-1">Basic</a> 
                                                
                                                <div id="dialog-1" title="Basic dialog" style="display:none">
                                                    <p>Quisque fermentum tempus bibendum. Integer consectetur eros eget nibh eleifend non molestie ipsum vehicula. Duis vulputate dignissim nisl, eu feugiat justo scelerisque nec. Sed mauris risus, placerat non tincidunt et, iaculis a turpis. Donec eget nibh felis. Fusce eleifend mauris sed quam condimentum egestas.</p>
                                                </div>
                                                
                                                <a href="javascript:void(0);" class="button-text" id="open-dialog-2">Modal</a> 
                                                
                                                <div id="dialog-2" title="Modal dialog" style="display:none">
                                                    <p>Mauris dolor turpis, molestie et blandit elementum, imperdiet at nunc. Nam cursus purus ut felis tincidunt sed tincidunt massa sagittis. Curabitur enim enim, lacinia sed suscipit ac, egestas at erat. Nulla in nisl nunc. Proin eget augue ante, ut vehicula ipsum.</p>
                                                </div>
        
                                                <a href="javascript:void(0);" class="button-text" id="open-dialog-3">Confirmation</a> 
                                                
                                                <div id="dialog-3" title="Modal confirmation" style="display:none">
                                                    <p>Mauris dolor turpis, molestie et blandit elementum, imperdiet at nunc. Nam cursus purus ut felis tincidunt sed tincidunt massa sagittis. Curabitur enim enim, lacinia sed suscipit ac, egestas at erat. Nulla in nisl nunc. Proin eget augue ante, ut vehicula ipsum.</p>
                                                </div>
                                                
                                                <a href="javascript:void(0);" class="button-text" id="open-dialog-4">With a form</a> 
                                                
                                                <div id="dialog-4" title="Modal with a form" style="display:none">
                                                    <form>                                                        
                                                        <div class="g_1_4">
                                                            <label for="f-name">Name:</label> 
                                                        </div>
                                                        <div class="g_3_4_last">
                                                            <input type="text" id="f-name" name=""/>
                                                        </div>
                                                        
                                                        <div class="spacer-10"><!-- spacer 10px --></div>
                                                        
                                                        <div class="g_1_4">
                                                            <label for="f-name">Email:</label> 
                                                        </div>
                                                        <div class="g_3_4_last">
                                                            <input type="text" id="f-email" name=""/>
                                                        </div>
                                                        
                                                        <div class="spacer-10"><!-- spacer 10px --></div>
                                                        
                                                        <div class="g_1_4">
                                                            <label for="f-subject">Subject:</label> 
                                                        </div>
                                                        <div class="g_3_4_last">
                                                            <input type="text" id="f-subject" name=""/>
                                                        </div>
                                                        
                                                        <div class="spacer-10"><!-- spacer 10px --></div>
                                                        
                                                        <div class="g_1_4">
                                                            <label for="f-message">Message:</label> 
                                                        </div>
                                                        
                                                        <div class="g_3_4_last">
                                                            <textarea name="" id="f-message"></textarea>
                                                        </div>
                                                        
                                                        <div class="spacer-10"><!-- spacer 10px --></div>
                                                        
                                                        <div class="g_1">  
                                                            <input type="submit" value="Submit" class="button-text"/>
                                                        </div>	                                                                                                        
                                                    </form>                                                   
                                                </div>

                                                <a href="javascript:void(0);" class="button-text" id="open-dialog-5">With eTabs</a> 
                                                
                                                <div id="dialog-5" title="Modal with eTabs" style="display:none">
                                                    <ul class="etabs">
                                                        <li class="etabs-active"><a href="#etab11">Tab 1</a></li>
                                                        <li><a href="#etab12">Tab 2</a></li>
                                                        <li><a href="#etab13">Tab 3</a></li>
                                                    </ul>  
                                                    <div id="etab11" class="etabs-content">
                                                    Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ul                                                       lamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend                                                     adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut                                                    dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus. 
                                                    </div> 
                                                    <div id="etab12" class="etabs-content">
                                                    Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus a                                                       uctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci.
                                                    </div> 
                                                    <div id="etab13" class="etabs-content">
                                                    Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ul                                                       lamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend                                                     adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut                                                    dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam ele                                                       mentum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis                                                       ligula eleifend adipiscing. Duis orci. 
                                                    </div>                                                          
                                                </div>
                                            </div> 
                                        </div>                                                                         
                                	</div>
                                </div><!-- End .powerwidget -->
                                                             
                                <!-- New widget -->
                                
                                <div class="powerwidget" id="widget2">
                                    <header>
                                    	<h2>eNotify</h2>                                  
                                    </header>
                                    <div>
                                    	<div class="inner-spacer"> 
                                            <div class="dialog-big warning">
                                                <h3>Plugin update</h3>
                                                <span>x</span>
                                                <div>
    This plugin will be updated, we are going to add more features and option to it. Dont worry all our updates are <b>free and stay free</b>. All of the updates/changes are logged so that you know what to update and what not.                           </div>                                                
                                            </div>
                                            
                                            <div class="spacer-10"><!-- spacer 10px --></div>  
                                            
                                            <label class="g_1_4">Growl:</label> 
                                            <div class="g_3_4_last">                                     
                                                <a href="javascript:void(0);" class="button-text" id="open-growl-1">Sticky(effect: fade)</a>
                                                <a href="javascript:void(0);" class="button-text" id="open-growl-2">Auto hide</a>
                                                <a href="javascript:void(0);" class="button-text" id="open-growl-3">Only text</a>
                                                <a href="javascript:void(0);" class="button-text" id="open-growl-4">Max 6 open</a>
                                                <a href="javascript:void(0);" class="button-text" id="open-growl-5">Custom class</a>  
                                                <a href="javascript:void(0);" class="button-text" id="open-growl-6">Callbacks</a>
                                                <a href="javascript:void(0);" class="button-text" id="open-growl-7">Remove all</a>                                                
                                            </div>    
                                        </div> 

										<div class="inner-spacer"> 
                                            <label class="g_1_4">Loader:</label> 
                                            <div class="g_3_4_last">                                     
                                                <a href="javascript:void(0);" class="button-text" id="open-loader-1">Basic</a>
                                                <a href="javascript:void(0);" class="button-text" id="open-loader-2">No opacity &amp; other position</a>
                                                <a href="javascript:void(0);" class="button-text" id="open-loader-3">Callbacks</a>
                                            </div>    
                                        </div>  

										<div class="inner-spacer"> 
                                            <label class="g_1_4">Notification:</label> 
                                            <div class="g_3_4_last">                                     
                                                <a href="javascript:void(0);" class="button-text" id="open-notification-1">Top</a>
                                                <a href="javascript:void(0);" class="button-text" id="open-notification-2">Bottom</a>
                                                <a href="javascript:void(0);" class="button-text" id="open-notification-3">Target</a>
                                                <a href="javascript:void(0);" class="button-text" id="open-notification-4">Auto hide</a>
                                                <a href="javascript:void(0);" class="button-text" id="open-notification-5">Callbacks</a>
                                                <a href="javascript:void(0);" class="button-text" id="open-notification-6">Remove all</a>
                                            </div>    
                                        </div>                                                                                                                                                            
                                	</div>
                                </div><!-- End .powerwidget -->
                                
                                <!-- New widget -->
                                
                                <div class="powerwidget" id="widget3">
                                    <header>
                                    	<h2>Dialogs</h2>                                  
                                    </header>
                                    <div> 
                                        <div class="dialog-inline error">
                                            <p><img src="images/icons/dialogs/delete-16.png" alt=""/> Inline dialog</p>
                                            <span>x</span>
                                        </div> 
                                        
                                        <div class="spacer-10"><!-- spacer 10px --></div> 
                                          
                                        <div class="inner-spacer">                                                                               
                                            <label class="g_1_4">Success:</label> 
                                            <div class="g_3_4_last"> 
                                                <div class="dialog success">
                                                    <p><img src="images/icons/dialogs/plus-16.png" alt=""/> class: success</p>
                                                    <span>x</span>
                                                </div>                                              
                                            </div>
                                            
                                            <div class="clear"><!-- New row --></div> 
    
                                            <label class="g_1_4">Error:</label> 
                                            <div class="g_3_4_last"> 
                                                <div class="dialog error">
                                                    <p><img src="images/icons/dialogs/delete-16.png" alt=""/> class: error</p>
                                                    <span>x</span>
                                                </div>                                           
                                            </div>
                                            
                                            <div class="clear"><!-- New row --></div> 
    
                                            <label class="g_1_4">Warning:</label> 
                                            <div class="g_3_4_last"> 
                                                <div class="dialog warning">
                                                    <p><img src="images/icons/dialogs/warning-16.png" alt=""/> class: warning</p>
                                                    <span>x</span>
                                                </div>                                        
                                            </div>
                                            
                                            <div class="clear"><!-- New row --></div> 
    
                                            <label class="g_1_4">Information:</label> 
                                            <div class="g_3_4_last"> 
                                                <div class="dialog info">
                                                    <p><img src="images/icons/dialogs/info-16.png" alt=""/> class: info</p>
                                                    <span>x</span>
                                                </div>                                      
                                            </div> 
                                            
                                            <div class="clear"><!-- New row --></div>                      
    
                                            <label class="g_1_4">Message:</label> 
                                            <div class="g_3_4_last"> 
                                                <div class="dialog message">
                                                    <p><img src="images/icons/dialogs/comment-16.png" alt=""/> class: message</p>
                                                    <span>x</span>
                                                </div>                                            
                                            </div>
                                        </div>   
                                	</div>
                                </div><!-- End .powerwidget -->
                                                                        
                                <!-- New widget -->
                                
                                <div class="powerwidget" id="widget4">
                                    <header>
                                    	<h2>Big dialogs</h2>                                  
                                    </header>
                                    <div>                                        
                                        <div class="dialog-big-inline warning">
                                            <h3>Big inline dialog</h3>
                                            <span>x</span>
                                            <div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam justo sit amet odio aliquam semper. Phasellus eget lobortis nisi. Vivamus in nulla ut justo convallis tincidunt. Etiam rutrum suscipit dolor, vitae facilisis eros tincidunt gravida. Fusce vulputate lorem sed lacus pellentesque egestas adipiscing ipsum fringilla. Proin scelerisque elementum dui, eu scelerisque dolor rhoncus non. Sed justo velit, sollicitudin ac adipiscing sit amet, iaculis a tortor. 
                                            </div>                                                
                                        </div>
                                        
                                        <div class="spacer-10"><!-- spacer 10px --></div>     
                                        
                                        <div class="inner-spacer">     
                                            <label class="g_1_4">Success:</label> 
                                            <div class="g_3_4_last"> 
                                                <div class="dialog-big success">
                                                    <h3>class: success</h3>
                                                    <span>x</span>
                                                    <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam justo sit amet odio aliquam semper. Phasellus eget lobortis nisi. Vivamus in nulla ut justo convallis tincidunt. Etiam rutrum suscipit dolor, vitae facilisis eros tincidunt gravida. Fusce vulputate lorem sed lacus pellentesque egestas adipiscing ipsum fringilla. Proin scelerisque elementum dui, eu scelerisque dolor rhoncus non. Sed justo velit, sollicitudin ac adipiscing sit amet, iaculis a tortor. 
                                                    </div>                                                
                                                </div>                                              
                                            </div>
                                            
                                            <div class="clear"><!-- New row --></div> 
    
                                            <label class="g_1_4">Error:</label> 
                                            <div class="g_3_4_last"> 
                                                <div class="dialog-big error">
                                                    <h3>class: error</h3>
                                                    <span>x</span>
                                                    <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam justo sit amet odio aliquam semper. Phasellus eget lobortis nisi. Vivamus in nulla ut justo convallis tincidunt. Etiam rutrum suscipit dolor, vitae facilisis eros tincidunt gravida. Fusce vulputate lorem sed lacus pellentesque egestas adipiscing ipsum fringilla. Proin scelerisque elementum dui, eu scelerisque dolor rhoncus non. Sed justo velit, sollicitudin ac adipiscing sit amet, iaculis a tortor.
                                                    </div>                                                
                                                </div>                                           
                                            </div>
                                            
                                            <div class="clear"><!-- New row --></div> 
    
                                            <label class="g_1_4">Warning:</label> 
                                            <div class="g_3_4_last"> 
                                                <div class="dialog-big warning">
                                                    <h3>class: warning</h3>
                                                    <span>x</span>
                                                    <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam justo sit amet odio aliquam semper. Phasellus eget lobortis nisi. Vivamus in nulla ut justo convallis tincidunt. Etiam rutrum suscipit dolor, vitae facilisis eros tincidunt gravida. Fusce vulputate lorem sed lacus pellentesque egestas adipiscing ipsum fringilla. Proin scelerisque elementum dui, eu scelerisque dolor rhoncus non. Sed justo velit, sollicitudin ac adipiscing sit amet, iaculis a tortor. 
                                                    </div>                                                
                                                </div>                                        
                                            </div>
                                            
                                            <div class="clear"><!-- New row --></div> 
    
                                            <label class="g_1_4">Information:</label> 
                                            <div class="g_3_4_last"> 
                                                <div class="dialog-big info">
                                                    <h3>class: info</h3>
                                                    <span>x</span>
                                                    <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam justo sit amet odio aliquam semper. Phasellus eget lobortis nisi. Vivamus in nulla ut justo convallis tincidunt. Etiam rutrum suscipit dolor, vitae facilisis eros tincidunt gravida. Fusce vulputate lorem sed lacus pellentesque egestas adipiscing ipsum fringilla. Proin scelerisque elementum dui, eu scelerisque dolor rhoncus non. Sed justo velit, sollicitudin ac adipiscing sit amet, iaculis a tortor. 
                                                    </div>                                                
                                                </div>                                      
                                            </div> 
                                            
                                            <div class="clear"><!-- New row --></div>                        
    
                                            <label class="g_1_4">Message:</label> 
                                            <div class="g_3_4_last"> 
                                                <div class="dialog-big message">
                                                    <h3>class: message</h3>
                                                    <span>x</span>
                                                    <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam justo sit amet odio aliquam semper. Phasellus eget lobortis nisi. Vivamus in nulla ut justo convallis tincidunt. Etiam rutrum suscipit dolor, vitae facilisis eros tincidunt gravida. Fusce vulputate lorem sed lacus pellentesque egestas adipiscing ipsum fringilla. Proin scelerisque elementum dui, eu scelerisque dolor rhoncus non. Sed justo velit, sollicitudin ac adipiscing sit amet, iaculis a tortor. 
                                                    </div>                                                
                                                </div>                                            
                                            </div>
                                            
                                            <div class="clear"><!-- New row --></div> 
    
                                            <label class="g_1_4">With list:</label> 
                                            <div class="g_3_4_last"> 
                                                <div class="dialog-big success">
                                                    <h3>Big dialogs can have lists</h3>
                                                    <span>x</span>
                                                    <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam justo sit amet odio aliquam semper. Phasellus eget lobortis nisi. Vivamus in nulla ut justo convallis tincidunt. Etiam rutrum suscipit dolor, vitae facilisis eros tincidunt gravida. Fusce vulputate lorem sed lacus pellentesque egestas adipiscing ipsum fringilla. Proin scelerisque elementum dui, eu scelerisque dolor rhoncus non. Sed justo velit, sollicitudin ac adipiscing sit amet, iaculis a tortor.
    												<div class="spacer-10"><!-- spacer 10px --></div> 
    												<ul>
                                                    	<li>Lorem ipsum dolor vulputate lorem sed lacus pellentesque</li>
                                                        <li>Lorem ipsum dolor vulputate lorem sed lacus pellentesque</li>
                                                        <li>Lorem ipsum dolor vulputate lorem sed lacus pellentesque</li>
                                                        <li>Lorem ipsum dolor vulputate lorem sed lacus pellentesque</li>
                                                    </ul> 
                                                    </div>                                                
                                                </div>                                           
                                            </div>
                                        </div>   
                      				</div>
                                </div><!-- End .powerwidget -->                                
                            
                                <!-- New widget -->
                                
                                <div class="powerwidget" id="widget5">
                                    <header>
                                    	<h2>Custom dialogs</h2>                                  
                                    </header>
                                    <div>
                                        <div class="inner-spacer">                                         
                                            <label class="g_1_4">Red:</label> 
                                            <div class="g_3_4_last"> 
                                                <div class="dialog custom-red">
                                                    <p><img src="images/icons/plix-16/white/image-16.png" alt=""/> class: custom-red</p>
                                                    <span>x</span>
                                                </div>                                             
                                            </div>
                                            
                                            <div class="clear"><!-- New row --></div> 
    
                                            <label class="g_1_4">Green:</label> 
                                            <div class="g_3_4_last"> 
                                                <div class="dialog custom-green">
                                                    <p><img src="images/icons/plix-16/white/stats-16.png" alt=""/> class: custom-green</p>
                                                    <span>x</span>
                                                </div>                                         
                                            </div>
                                            
                                            <div class="clear"><!-- New row --></div> 
    
                                            <label class="g_1_4">Blue:</label> 
                                            <div class="g_3_4_last"> 
                                                <div class="dialog custom-blue">
                                                    <p><img src="images/icons/plix-16/white/vcard-16.png" alt=""/> class: custom-blue</p>
                                                    <span>x</span>
                                                </div>                                            
                                            </div>
                                            
                                            <div class="clear"><!-- New row --></div> 
    
                                            <label class="g_1_4">Purple:</label> 
                                            <div class="g_3_4_last"> 
                                                <div class="dialog custom-purple">
                                                    <p><img src="images/icons/plix-16/white/graph-16.png" alt=""/> class: custom-purple</p>
                                                    <span>x</span>
                                                </div>                                    
                                            </div>
                                            
                                            <div class="clear"><!-- New row --></div> 
                                            
                                            <label class="g_1_4">Orange:</label> 
                                            <div class="g_3_4_last"> 
                                                <div class="dialog custom-orange">
                                                    <p><img src="images/icons/plix-16/white/postcard-16.png" alt=""/> class: custom-orange</p>
                                                    <span>x</span>
                                                </div>                                           
                                            </div>
                                            
                                            <div class="clear"><!-- New row --></div> 
    
                                            <label class="g_1_4">Black:</label> 
                                            <div class="g_3_4_last"> 
                                                <div class="dialog custom-black">
                                                    <p><img src="images/icons/plix-16/white/arrow-up2-16.png" alt=""/> class: custom-black</p>
                                                    <span>x</span>
                                                </div>                                   
                                            </div>
                                            
                                            <div class="clear"><!-- New row --></div> 
    
                                            <label class="g_1_4">Grey:</label> 
                                            <div class="g_3_4_last"> 
                                                <div class="dialog custom-grey">
                                                    <p><img src="images/icons/plix-16/white/more-16.png" alt=""/> class: custom-grey</p>
                                                    <span>x</span>
                                                </div>                                          
                                            </div>
                                        </div>
                                    </div>
                                </div><!-- End .powerwidget -->
                            </section>
                            
							<div class="clear"><!-- New row --></div> 
                                                          
                            <!-- End grid -->
                                                   
                       </div><!-- End #content-main-inner --> 
                    </div><!-- End #content-main --> 
                </div><!-- End #content-inner --> 
                
                <!-- CONTENT FOOTER -->
                
                <footer id="content-footer">
                    <div class="left">
						<div class="left">
                               <a href="javascript:void(0);" class="button-icon tip-s" title="Some action">
                                  <span class="folder-10 plix-10"></span>
                              </a>                                                        
                              <a href="javascript:void(0);" class="button-icon tip-s" title="Some action">
                                  <span class="pencil-10 plix-10"></span>
                              </a>
                          </div><!-- End .left -->
                          <div class="right">
                              <a href="javascript:void(0);" class="button-icon tip-s" title="Some action">
                                  <span class="refresh-10 plix-10"></span>
                              </a> 
                          </div> <!-- End .right --> 
                    </div><!-- End .left --> 
                    <div class="right">
                    	<div class="left">
                    	Copyright © 2012 <a href="http://bit.ly/ldjfWQ">CreativeMilk</a>
                        </div><!-- End .left -->
                        <div class="right">
                        	<div class="theme-version">Version 1.0</div>
                        </div><!-- End .right -->
                    </div><!-- End .right -->                
                </footer><!-- End #content-footer -->                 
            </div><!-- End #content-border --> 
        </div><!-- End #content --> 
            
    </div><!-- End #container -->
    
    <!-- scroll to top link -->
    <div id="scrolltotop"><span></span></div> 
       
</body>
</html>